<template>
  <div ref="chinaMap" style="width: 100%;height: 100vh"></div>
</template>

<script>
/**
 * 1、在created中通过提供的地图数据使用axios将其获取出来
 * 2、在mounted中要初始化echart对象
 * 3、在计算属性中编写options选项
 * 4、在watch中注册地图以及设置options选项
 */
import axios from "axios";
import * as echarts from "echarts";
export default {
  data() {
    return {
      mapData: {},
    };
  },
  computed: {
    options() {
      return {
        geo: {
          type: "map",
          map: "china",
          zoom: 1.5,//初始化时的放大比率
          roam: true,//设置为true，可以拖拽地图
          label:{
            show:true,
            color:'#fff'
          }
        },
        visualMap:{
            min:0,
            max:1500,
            inRange:{
                color:['skyblue','blue']
            },
            calculable: true,
            text: ["高", "低"],
        },
        series: [
          {
            name: "2024年1月份全国雨雪分布图",
            type: "map",
            geoIndex: 0,
            data: [
              { name: "北京市", value: 100 },
              { name: "上海市", value: 1500 },
              { name: "天津市", value: 200 },
              { name: "重庆市", value: 200 },
              { name: "陕西省", value: 280 },
              { name: "河北省", value: 280 },
              { name: "山西省", value: 480 },
              { name: "辽宁省", value: 180 },
              { name: "吉林省", value: 680 },
              { name: "黑龙江省", value: 680 },
              { name: "江苏省", value: 680 },
              { name: "江西省", value: 680 },
              { name: "山东省", value: 680 },
              { name: "河南省", value: 680 },
              { name: "广东省", value: 680 },
              { name: "湖南省", value: 680 },
              { name: "海南省", value: 680 },
              { name: "四川省", value: 680 },
              { name: "贵州省", value: 680 },
              { name: "云南省", value: 680 },
              { name: "甘肃省", value: 680 },
              { name: "青海省", value: 680 },
              { name: "台湾省", value: 680 },
              { name: "安徽省", value: 680 },
              { name: "湖北省", value: 680 },
              { name: "浙江省", value: 680 },
              { name: "福建省", value: 680 },
              { name: "内蒙古自治区", value: 680 },
              { name: "广西壮族自治区", value: 680 },
              { name: "西藏自治区", value: 680 },
              { name: "宁夏回族自治区", value: 680 },
              { name: "新疆维吾尔自治区", value: 680 },
            ],
          },
        ],
      };
    },
  },
  watch: {
    mapData: {
      handler(newval) {
        console.log("newval", newval);
        echarts.registerMap("china", newval);
        this.chart.setOption(this.options)
      },
    },
  },
  methods: {
    async getChinaMapData() {
      const result = await axios.get(
        "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
      );
      this.mapData = result.data;
    },
  },
  created() {
    this.getChinaMapData();
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chinaMap);
  },
};
</script>

<style>
</style>